<template>
    <div>
        <div class="header_next">
            <post-head :showAction="true" active="wode"></post-head>
        </div>

        <div class="main">
            <div class="contMain">
                <div class="edit-main">
                    <div class="chatLeft">
                        <div class="chatItem" :class="{ chooseClass: isChoose == '基本资料' }"
                            @click="handleChoose('基本资料')">
                            <div class="chatItemIcon">
                                <i class="el-icon-user"></i>
                            </div>
                            <div class="chatItemText">基本资料</div>
                        </div>
                        <div class="chatItem" :class="{ chooseClass: isChoose == '其他信息' }"
                            @click="handleChoose('其他信息')">
                            <div class="chatItemIcon" style="background-color: #F5792A;">
                                <i class="el-icon-notebook-2"></i>
                            </div>
                            <div class="chatItemText">其他信息</div>
                        </div>
                        <div class="chatItem" :class="{ chooseClass: isChoose == '子公司' }"
                            @click="handleChoose('子公司')">
                            <div class="chatItemIcon" style="background-color: #F5792A;">
                                <i class="el-icon-mobile"></i>
                            </div>
                            <div class="chatItemText">子公司</div>
                        </div>
                        <div class="chatItem" :class="{ chooseClass: isChoose == '子账号' }"
                            @click="handleChoose('子账号')">
                            <div class="chatItemIcon" style="background-color: #F5792A;">
                                <i class="el-icon-box"></i>
                            </div>
                            <div class="chatItemText">子账号</div>
                        </div>
                    </div>
                    <div class="chatRight" v-if="isChoose == '基本资料'">
                        <div class="editItem">
                            <div class="editTitle">企业LOGO</div>
                            <div class="editMess">
                                <div class="em_user">
                                    <img :src="'https://www.aizhaopin.pro/prod-api/sys/common/static/'+companyInfo.logo" v-if="companyInfo.logo">
                                    <div class="no_logo" v-else>
                                        <span>暂无</span>
                                    </div>
                                    <input type="file" accept="image/*" @change="changeFile" />
                                </div>
                            </div>
                        </div>

                        <div class="editItem">
                            <div class="editTitle">公司名称</div>
                            <div class="editMess">
                                <span>{{ companyInfo.name }}</span>
                                <div class="editButton" @click="editName = true">编辑</div>
                            </div>
                        </div>
                        <div class="editItem">
                            <div class="editTitle">统一社会信用代码</div>
                            <div class="editMess">
                                <span>{{ companyInfo.creditCode }}</span>
                                <!-- <div class="editButton" @click="editName = true">编辑</div> -->
                            </div>
                        </div>
                      
                        <div class="editItem">
                            <div class="editTitle">手机号</div>
                            <div class="editMess">
                                <span>{{ companyInfo.phone }}</span>
                                <div class="editButton" @click="showMess = true">修改</div>
                            </div>
                        </div>
                        <div class="editItem">
                            <div class="editTitle">微信</div>
                            <div class="editMess">
                                <span v-if="userInfo.openId">已绑定</span>
                                <span v-else>未绑定</span>
                                <div class="editButton" v-if="userInfo.openId" @click="jiebang">解绑</div>
                            </div>
                        </div>
                        <div class="editItem">
                            <div class="editTitle">座机号码</div>
                            <div class="editMess">
                                <span>{{ companyInfo.landlineNumber }}</span>
                                <div class="editButton" @click="editLandlineNumber = true">编辑</div>
                            </div>
                        </div>
                        <div class="editItem">
                            <div class="editTitle">官网</div>
                            <div class="editMess">
                                <span>{{ companyInfo.officialWebsite }}</span>
                                <div class="editButton" @click="editOfficialWebsite = true">编辑</div>
                            </div>
                        </div>
                        <div class="editItem">
                            <div class="editTitle">联系人</div>
                            <div class="editMess">
                                <span>{{ companyInfo.contactName }}</span>
                                <div class="editButton" @click="editContactName = true">编辑</div>
                            </div>
                        </div>
                        <div class="editItem">
                            <div class="editTitle">联系人手机号码</div>
                            <div class="editMess">
                                <span>{{ companyInfo.contactPhone }}</span>
                                <div class="editButton" @click="editContactPhone = true">编辑</div>
                            </div>
                        </div>
                       
                    </div>
                   
                </div>
                <!-- <div class="content-other">
                    <main-right></main-right>
                </div> -->
            </div>
        </div>
        <el-dialog title="修改公司名称" :visible.sync="editName" width="30%" center>
            <el-input v-model="form.name" autocomplete="off"></el-input>
            <span slot="footer" class="dialog-footer">
                <el-button @click="editName = false">取 消</el-button>
                <el-button type="primary" @click="sureEditName">确 定</el-button>
            </span>
        </el-dialog>

        <el-dialog title="修改联系人" :visible.sync="editContactName" width="30%" center>
            <el-input v-model="form.contactName" autocomplete="off"></el-input>
            <span slot="footer" class="dialog-footer">
                <el-button @click="editContactName = false">取 消</el-button>
                <el-button type="primary" @click="sureEditContactName">确 定</el-button>
            </span>
        </el-dialog>

        <el-dialog title="修改联系人手机号" :visible.sync="editContactPhone" width="30%" center>
            <el-input v-model="form.contactPhone" autocomplete="off"></el-input>
            <span slot="footer" class="dialog-footer">
                <el-button @click="editContactPhone = false">取 消</el-button>
                <el-button type="primary" @click="sureEditContactPhone">确 定</el-button>
            </span>
        </el-dialog>

        <el-dialog title="修改座机号码" :visible.sync="editLandlineNumber" width="30%" center>
            <el-input v-model="form.landlineNumber" autocomplete="off"></el-input>
            <span slot="footer" class="dialog-footer">
                <el-button @click="editLandlineNumber = false">取 消</el-button>
                <el-button type="primary" @click="sureEditLandlineNumber">确 定</el-button>
            </span>
        </el-dialog>

        <el-dialog title="修改官网" :visible.sync="editOfficialWebsite" width="30%" center>
            <el-input v-model="form.officialWebsite" autocomplete="off"></el-input>
            <span slot="footer" class="dialog-footer">
                <el-button @click="editOfficialWebsite = false">取 消</el-button>
                <el-button type="primary" @click="sureEditOfficialWebsite">确 定</el-button>
            </span>
        </el-dialog>
   
     
    
        <div class="muban_dialog" v-show="showMess"></div>
        <div class="mess_main" v-show="showMess">
            <i class="el-icon-close" @click="showMess = false"></i>
            <div class="pc_title">
                <span>修改手机号码</span>
            </div>
            <div class="lm_desc">
                <span>为了保护你的账号安全，请验证身份，验证成功后进行下一步操作</span>
            </div>
            <!-- <div class="pc_input" v-if="userInfo.telphone">使用手机号{{ form.telphone }}验证</div> -->
            <div class="pc_input"> <input placeholder="请输入手机号" v-model="form.phone" /></div>
            <div class="pc_yzm">
                <input placeholder="请输入验证码" v-model="code" />
                <div class="pcy_txt" @click.stop="sendCode" v-if="!haveSend">
                    <span>获取验证码</span>
                </div>
                <div class="pcy_time" v-else>
                    <span>{{ time }}</span>
                </div>
            </div>
            <div class="banding_btn" @click.stop="bangdingPhone">
                <span>绑定</span>
            </div>
        </div>
    </div>
</template>
<script>
import until from "@/api/until.js";
import homeapi from "@/api/api.js";
import postHead  from '@/components/postHead.vue';

export default {

    data() {
        return {
            activeTabIndex: 0,
            isChoose: "基本资料",
            value1: true,
            value2: true,
            value3: true,
            value4: true,

            editName: false,
            editSex: false,
            editAddress: false,
            editIntro: false,
            editTel: false,
            form: {
                phone: ",",
                name: "",
                img: "",
 
                address: ""
            },
            showMess: false,
            haveSend: false,
            time: 60,
            code: "",
            editBirthDay: false,
            editNickName:false,
            companyInfo:{},
            editContactName:false,
            editContactPhone:false,
            editLandlineNumber:false,
            editOfficialWebsite:false,

            userInfo:{},
        };
    },
    components: {
        postHead
        
    },
    mounted() {
        this.getCompanyInfo();
        this.getUserInfo();
    },
    methods: {
        toUser() {
            window.open("#/user")

        },
        setActiveTab(index, tab) {

            this.$router.push("/");
        },
        toHome() {
            window.open("#/")

        },
        toSend() {
            window.open("#/send")

        },
        toChat() {
            window.open("#/chat")

        },

        async changeFile(e) {
            console.log(e)
      
          

            let file=e.target.files[0]
            var formData = new FormData();
            // 服务端要求参数是 pic1 
            formData.append('file',file);
            this.loading = true
            let data=await homeapi.uploadFile(formData);
            if(data.code==200){
                this.loading=false
                this.companyInfo.logo=data.result.url
                this.form.logo=data.result.path
                this.actionSave();
            }
        
        },
        handleChoose(val) {
            this.isChoose = val;
        },
        sureEditName() {
            this.editName = false;
            this.actionSave();
        },
        sureEditContactName() {
            this.editContactName = false;
            this.actionSave();
        },
        sureEditContactPhone(){
            this.editContactPhone=false
            this.actionSave();
        },
        sureEditSex() {
            this.editSex = false;
            this.actionSave();
        },
        sureEditAddress() {
            this.editAddress = false;
            this.actionSave();
        },
        sureEditIntro() {
            this.editIntro = false;
            this.actionSave();
        },
        sureEditLandlineNumber(){
            this.editLandlineNumber = false;
            this.actionSave();
        },
        sureEditOfficialWebsite(){
            this.editOfficialWebsite = false;
            this.actionSave();
        },
        async getCompanyInfo() {
            let data = await homeapi.getCompanyInfo();
            if (data.code == 200) {
                this.companyInfo = data.result;
                this.form=JSON.parse(JSON.stringify(data.result)) 
           
            }
        },
        async actionSave() {
            let data = await homeapi.editCompanyInfo(this.form);
            if (data.code == 200) {
                this.$message({
                    type: "success",
                    message: "修改成功!"
                });
                this.getCompanyInfo();
            }
        },
        //发送验证码
        async sendCode() {
            let phone = this.form.phone;
            if (phone.length != 11) {
                this.$message.error("请输入正确的手机号");
                return false;
            }
            let data = await homeapi.sendCode({ phone });
            if (data.code == 200) {
                this.$message.success("发送成功");
                this.haveSend = true;
                this.time = 60;
                this.getTime();
            }
            else{
                this.$message.error(data.message)
            }
        },
        //获取时间
        getTime() {
            if (this.time > 0) {
                this.time = this.time - 1
                setTimeout(() => {
                    this.getTime()
                }, 1000)
            }
            else {
                this.haveSend = false
            }

        },
        async getUserInfo(){
            let data=await homeapi.getUserinfo();
            if(data.code==200){
                this.userInfo=data.result.user
            }
        },


        //绑定手机号码
        async bangdingPhone() {
            let phone = this.form.phone;
            let code = this.code;
            let data = await homeapi.changePhone({
                phone,
                code
            });

            if (data.code == 200) {
                this.$message.success("更新成功");
                this.showMess = false
              
                this.getUserInfo();
            }
            else{
                this.$message.error(data.message)
            }
        },
        async jiebang(){
            let data=await homeapi.unBindWeChat();
            if (data.code == 200) {
                this.$message.success("解绑成功");
          
              
                this.getUserInfo();
            }
            else{
                this.$message.error(data.message)
            }
        }
    }
};
</script>
<style scoped lang="less">
.main {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    margin-top: 30px;
}

.sendTextMain {
    margin-top: 20px;
    width: 850px;
    height: calc(100vh - 195px);
    border-radius: 6px;
    background: #fff;
    box-shadow: 0 1px 5px #000e510d;
    padding: 40px;
    box-sizing: border-box;
    position: relative;
}

.chooseType {
    position: absolute;
    left: 40px;
    bottom: 40px;
    display: flex;
    align-items: center;

    .chooseTypeItem {
        width: 80px;
        height: 34px;
        border-radius: 17px;
        background: #f8f8f8;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 400;
        font-size: 12px;
        line-height: 18px;
        color: #999;
        margin-right: 15px;
        cursor: pointer;
    }

    .chooseTypeItem:last-child {
        margin-right: 0;
    }
}

.prievew {
    position: absolute;
    right: 40px;
    bottom: 40px;
    font-weight: 400;
    font-size: 14px;
    line-height: 18px;
    color: #666;
    cursor: pointer;
}

.sendMain {
    width: 850px;
    height: 85px;
    background: #fff;
    padding: 20px 40px 40px 40px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .send-left {
        display: flex;
        align-items: center;

        .option-button {
            cursor: pointer;
            margin-right: 50px;
            font-size: 12px;

            .iconfont {
                font-size: 24px;
            }
        }
    }

    .send-button {
        width: 76px;
        height: 34px;
        background: #bd0509;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size:12px;
        line-height: 24px;
        color: #fff;
        border-radius: 20px;
        cursor: pointer;
    }
}

.content-mess {
    height: calc(100vh - 120px);
    position: relative;
}

.edit-main {
    width: 1200px;
    display: flex;
    background: #fff;
    height: calc(100vh - 120px);
    margin-right: 20px;
}

.chatLeft {
    width: 169px;
    border-right: 1px solid #ebebeb;
    height: 100%;
    overflow: auto;

    .chatItem {
        padding: 18px;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        cursor: pointer;

        .chatItemIcon {
            width: 32px;
            height: 32px;
            background: #F5792A;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 8px;
            border-radius: 50%;

            .el-avatar {
                min-width: 32px;
            }

            i {
                font-size:12px;
                color: #fff;
            }
        }

        .chatItemText {
            font-weight: bold;
            font-size: 12px;
            line-height: 26px;
            color: #222;
        }
    }
}

.chatItemName {
    font-size: 12px;
    line-height: 12px;
}

.chatItemCont {
    font-size: 12px;
    color: #999;
}

.chooseClass {
    background-color: #ffeee3 !important;
}

.chatRight {
    flex: 1;
    overflow: auto;

    .editItem {
        padding: 20px;
        box-sizing: border-box;
        box-shadow: 0 1px 5px #000e510d;

        .editTitle {
            font-weight: bold;
            color: #222;
            font-size: 14px;
            margin-bottom: 10px;
        }

        .editMess {
            display: flex;
            align-items: center;
            justify-content: space-between;
            font-weight: 400;
            font-size: 12px;
            line-height: 26px;
            color: #8590a6;

            .editButton {
                color: #056de8;
                cursor: pointer;
            }
        }
    }
}

.messItem {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.mess_main i {
    position: absolute;
    right: -100px;
    top: -45px;
    color: #fff;
    font-size: 20px;
    cursor: pointer;
}

.lm_desc {
    font-weight: 400;
    font-size: 12px;
    line-height: 26px;
    text-align: center;
    color: #999;
    margin-bottom: 50px;
}

.mess_main {
    display: flex;
    align-items: center;
    flex-direction: column;
    width: 400px;
    height: 480px;
    border-radius: 20px;
    background: #fff;
    border: 2px solid #707070;
    position: fixed;
    z-index: 100;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    padding: 0 60px;
    box-sizing: border-box;
}

.pc_title {
    font-weight: 900;
    font-size: 22px;
    line-height: 26px;
    color: #444;
    margin: 45px 0 10px 0;
}

.pc_input {
    width: 100%;
    text-align: left;
    font-weight: 400;
    font-size: 12px;
    line-height: 26px;
    color: #333;
    margin-bottom: 25px;

    input {
        width: 78%;
        height: 40px;
        border: none;
        border-bottom: 1px solid #ebebeb;
        outline: none;
    }
}

.pc_yzm {
    width: 100%;
    text-align: left;
    display: flex;
    align-items: center;
    margin-bottom: 45px;

    input {
        width: 78%;
        height: 40px;
        border: none;
        border-bottom: 1px solid #ebebeb;
        outline: none;
    }

    .pcy_txt {
        flex: 1;
        font-weight: 400;
        font-size: 12px;
        line-height: 26px;
        color: #175199;
    }

    .pcy_time {
        font-size: 12px;
        color: #bd0509;
        font-weight: 700;
    }
}

.banding_btn {
    width: 220px;
    height: 38px;
    border-radius: 4px;
    background: #F5792A;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 400;
    font-size: 12px;
    line-height: 26px;
    color: #fff;
    cursor: pointer;
}

.em_user {
    width: 60px;
    height: 60px;
 
    position: relative;
}

.em_user img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    overflow: hidden;
}

.em_user input {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    opacity: 0;
}
.muban_dialog{
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background: #000000;
    opacity: 0.4;
}
.form-horizontal{
    margin-top: 30px;
}
.form-horizontal .form-group{
    margin: 0px;

}
.register-form-label{
    width: 20%;
}
.no_logo{
    width: 100%;
    height: 100%;
    font-size: 12px;
    border: 1px solid #e6e6e6;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}
</style>